CSS - tutorial - 27 - footer position

Revision: February 1, 2024

Content

how to get rid of a floating footer?

top

When creatinga static web page, you may often find your footer floating up. To get rid of this problem and keep the footer at the bottom of the webapge, there are different ways possible:

1 - use "footer{position: fixed}" or "footer{position:sticky}"

example: footer position properties

            <style>
                /* (A) FOOTER */
                #page-footer {/* (A1) FIXED AT BOTTOM */ position: fixed; bottom: 0; left: 0; /* (A2) DIMENSIONS */ width: 100%; height: 40px; padding: 0 5px; /* (A3) CENTER TEXT */
                display: flex; align-items: center; justify-content: center; }
                /* (B) MAIN CONTENTS */
                #page-main {padding-bottom: 50px; /* SAME OR MORE HEIGHT THAN FOOTER */}
            </style>
            <header id="page-head">MY SITE</header>
            <main id="page-main">Last Line.</main>
            <footer id="page-footer">Copyright My Site</footer>

2 - use negative bottom margins on the element above the footer.

example: negative bottom margins

        <body>
            <div class="wrapper">content
                    <div class="push"></div>
            </div>
            <footer class="footer"></footer>
        </body>
        <style>
            html, body {height: 100%;}
            .wrapper { min-height: 100%;
                /* Equal to height of footer */
                /* But also accounting for potential margin-bottom of last child */
                margin-bottom: -50px;}
            .footer, .push { height: 50px;}
        </style>

3 - use negative top margins on the footer.

example: negative top margins

            <body>
                <div class="content">
                <div class="content-inside">content </div>
                </div>
                <footer class="footer"></footer>
            </body>
            <style>
                html, body {height: 100%; margin: 0;}
                .content {min-height: 100%;}
                .content-inside {padding: 20px; padding-bottom: 50px;}
                .footer {height: 50px; margin-top: -50px;
            </style>

4 - Use calc() to adjust the height of the element above the footer.

example: use calc() function

            <body>
                <div class="content">content</div>
                <footer class="footer"></footer>
            </body>
            <style>
                .content {min-height: calc(100vh - 70px);}
                .footer {height: 50px;}
            </style>

5 - use a flexbox layout that "stretches" the body section

example:

            <style>
                /* (A) FULL HEIGHT DOCUMENT */
                html, body {padding: 0; margin: 0; height: 100%; }
                /* (B) FLEXIBLE BOX ON BODY */
                body {display: flex; flex-direction: column;}
                /* (C) ALLOW MAIN CONTENT SECTION TO AUTO-FILL HEIGHT */
                #page-main { flex-grow: 1; }
            </style>
            <header id="page-head">MY SITE</header>
            <main id="page-main">Main contents</main>
            <footer id="page-footer">Copyright My Site</footer>

example: use calc() function

        <body>
            <div class="content">content</div>
            <footer class="footer"></footer>
        </body>
        <style>
            html, body {height: 100%;}
            body {display: flex; flex-direction: column;}
            .content {flex: 1 0 auto;}
            .footer {flex-shrink: 0;}
        </style>

6 - use a grid layout to achieve the "stretch body section"

example: use grid layout

            <style>
                /* (A) FULL HEIGHT DOCUMENT */
                html, body {padding: 0; margin: 0; height: 100%; }
                /* (B) GRID LAYOUT - AUTO-FILL HEIGHT FOR MAIN SECTION */
                body { display: grid; grid-template-rows: auto 1fr auto;}
            </style>
            <header id="page-head">MY SITE</header>
            <main id="page-main">Main contents</main>
            <footer id="page-footer">Copyright My Site</footer>

example: use grid layout

        <body>
            <div class="content">content</div>
            <footer class="footer"></footer>
        </body>
        <style>
                html {height: 100%;}
                body {min-height: 100%;display: grid; grid-template-rows: 1fr auto;}
                .footer {grid-row-start: 2; grid-row-end: 3;}
        </style>